<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="shortcut icon" href="/qingzhu/images/s.ico" type="image/x-icon">
	<link rel="stylesheet" href="/qingzhu/css/reset.css">
	<link rel="stylesheet" href="/qingzhu/css/index.css">
	<link rel="stylesheet" href="/qingzhu/css/common.css">
	<link rel="stylesheet" th:href="@{/mall/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/mall/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/mall/css/common.css}">
	<link rel="stylesheet" th:href="@{/mall/styles/header.css}">
<!--	<link rel="stylesheet" th:href="@{'/mall/styles/'+${path}+'.css'}">-->
	<link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
	<title>青竹</title>
</head>

<body>
<!-- 顶部栏 -->
<div th:replace="/qingzhu/front/head_and_footer::head"></div>
<!-- 顶部栏结束 -->
<!--<div class="banner">
	<ul class="pic">
		<th:block th:unless="${#lists.isEmpty(carousels)}">
			<th:block th:each="carousel : ${carousels}">
				<li class="cur">
					<a th:href="@{${carousel.redirectUrl}}">
						<img th:src="@{${carousel.carouselUrl}}" alt="">
					</a>
				</li>
			</th:block>
		</th:block>
		<th:block th:if="${#lists.isEmpty(carousels)}">
			<li class="cur"><a href="javascript:void(0)"><img src="/qingzhu/images/img11.png" alt=""></a></li>
			<li class="cur"><a href="javascript:void(0)"><img src="/qingzhu/images/img12.png" alt=""></a></li>
			<li class="cur"><a href="javascript:void(0)"><img src="/qingzhu/images/img13.png" alt=""></a></li>
		</th:block>
	</ul>
	<ol class="circle">
		<li class="cur"></li>
		<li></li>
		<li></li>
	</ol>
</div>-->
<div class="banner">
	<div class="swiper-container f1">
		<div class="swiper-wrapper">
			<!-- 配置了轮播图则显示后台配置的轮播图 -->
			<th:block th:unless="${#lists.isEmpty(carousels)}">
				<th:block th:each="carousel : ${carousels}">
					<div class="swiper-slide">
						<a th:href="@{${carousel.redirectUrl}}">
							<img th:src="@{${carousel.carouselUrl}}" alt="">
						</a>
					</div>
				</th:block>
			</th:block>
			<!-- 未配置轮播图则显示默认的三张轮播图 -->
			<th:block th:if="${#lists.isEmpty(carousels)}">
				<div class="swiper-slide">
					<img src="./mall/image/swiper/banner01.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="./mall/image/swiper/banner02.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="./mall/image/swiper/banner03.jpg" alt="">
				</div>
			</th:block>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</div>
<!-- banner部分结束 -->
<!-- qingzhu_content部分开始 -->
<div class="qingzhu_content">
	<div class="qingzhu_content_c inner_c">
		<div class="pro1">
			<div class="title">
				<h2><a href="javascript:void(0)">新品推荐，精心挑选</a></h2>
				<p class="info">家居必备使用小单品</p>
			</div>
			<div class="pro_pic">
				<div class="pro_c">
					<ul>
						<th:block th:unless="${#lists.isEmpty(marketingNew)}">
							<li th:each="mN : ${marketingNew}">
								<a th:href="@{'/goods/detail/'+${mN.goodsId}}">
									<img th:src="@{${mN.goodsCoverImg}}" th:alt="${mN.goodsName}">
									<div class="cont">
										<h3 th:text="${mN.goodsName}"></h3>
										<span th:text="'￥'+${mN.sellingPrice}"></span>
									</div>
								</a>
							</li>
						</th:block>
					</ul>
				</div>
				<th:block th:if="${#lists.isEmpty(marketingNew)}">
					<div class="pro_c">
						<ul>
							<li>
								<a href="javascript:void(0)">
									<img src="/qingzhu/images/img23.png" alt="">
									<div class="cont">
										<h3>黑陶自然花香蜡烛</h3>
										<span>￥300</span>
									</div>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<img src="/qingzhu/images/img24.png" alt="">
									<div class="cont">
										<h3>黑陶自然花香蜡烛</h3>
										<span>￥300</span>
									</div>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<img src="/qingzhu/images/img25.png" alt="">
									<div class="cont">
										<h3>黑陶自然花香蜡烛</h3>
										<span>￥300</span>
									</div>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<img src="/qingzhu/images/img26.png" alt="">
									<div class="cont">
										<h3>黑陶自然花香蜡烛</h3>
										<span>￥300</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</th:block>

				<div class="btns">
					<a href="javascript:void(0)" class="leftBtn">&lt;</a>
					<a href="javascript:void(0)" class="rightBtn">&gt;</a>
				</div>
			</div>
		</div>
		<div class="pro2">
			<div class="title">
				<h2><a href="javascript:void(0)">专题活动，限时促销</a></h2>
				<p class="info">严选材质，用心设计</p>
			</div>
			<div class="pro2_c">
				<ul class="pro2_c_pic">
					<th:block th:unless="${#lists.isEmpty(marketingSale)}">
						<th:block th:each="mS : ${marketingSale}">
							<li th:if="${mSStat.first}" class="pic1 pic">
								<a th:href="@{'/goods/detail/'+${mS.goodsId}}">
									<img th:src="@{${mS.goodsCoverImg}}" th:alt="${mS.goodsName}">
								</a>
								<span th:onclick="'toDetail('+${mS.goodsId}+')'"></span>
							</li>
							<li th:if="${mSStat.count}==2" class="pic2 pic">
								<a th:href="@{'/goods/detail/'+${mS.goodsId}}">
									<img th:src="@{${mS.goodsCoverImg}}" th:alt="${mS.goodsName}">
								</a>
								<span></span>
							</li>
							<li th:if="${mSStat.count}==3" class="pic3 pic">
								<a th:href="@{'/goods/detail/'+${mS.goodsId}}">
									<img th:src="@{${mS.goodsCoverImg}}" th:alt="${mS.goodsName}">
								</a>
								<span></span>
							</li>
						</th:block>
					</th:block>
					<th:block th:if="${#lists.isEmpty(marketingSale)}">
						<li class="pic1 pic">
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img31.jpg" alt="">
							</a>
							<span></span>
						</li>
						<li class="pic2 pic">
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img32.jpg" alt="">
							</a>
							<span></span>
						</li>
						<li class="pic3 pic">
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img33.jpg" alt="">
							</a>
							<span></span>
						</li>
					</th:block>
				</ul>
			</div>
		</div>
		<div class="pro3">
			<div class="title">
				<h2><a href="javascript:void(0)">青竹良品，你的家居首选</a></h2>
				<p class="info">天然之源，诚挚之礼</p>
			</div>
			<div class="pro3_c">
				<ul class="pub_pro">
					<li>
						<a href="javascript:void(0)">
							<img src="/qingzhu/images/img40.jpg" alt="">
						</a>
						<div class="mask"></div>
					</li>
					<th:block th:unless="${#lists.isEmpty(marketingGreat)}">
						<th:block th:each="mG : ${marketingGreat}">
							<li>
								<a th:href="@{'/goods/detail/'+${mG.goodsId}}">
									<img th:src="@{${mG.goodsCoverImg}}" th:alt="${mG.goodsName}">
									<div class="cont">
										<h3 th:text="${mG.goodsName}">替换的文字</h3>
										<span th:text="${mG.sellingPrice}"></span>
									</div>
								</a>
								<div class="mask"></div>
							</li>
						</th:block>
					</th:block>
					<th:block th:if="${#lists.isEmpty(marketingGreat)}">
						<li>
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img41.png" alt="">
								<div class="cont">
									<h3>简约时尚水泥花瓶</h3>
									<span>￥450</span>
								</div>
							</a>
							<div class="mask">
								<a href="javascript:void(0)" class="btn">
									查看详情
								</a>
							</div>
						</li>

						<li>
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img42.png" alt="">
								<div class="cont">
									<h3>简约时尚水泥花瓶</h3>
									<span>￥450</span>
								</div>
							</a>
							<div class="mask">
								<a href="javascript:void(0)" class="btn">
									查看详情
								</a>
							</div>
						</li>
						<li>
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img43.png" alt="">
								<div class="cont">
									<h3>简约时尚水泥花瓶</h3>
									<span>￥450</span>
								</div>
							</a>
							<div class="mask">
								<a href="javascript:void(0)" class="btn">
									查看详情
								</a>
							</div>
						</li>
						<li>
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img44.png" alt="">
								<div class="cont">
									<h3>简约时尚水泥花瓶</h3>
									<span>￥450</span>
								</div>
							</a>
							<div class="mask">
								<a href="javascript:void(0)" class="btn">
									查看详情
								</a>
							</div>
						</li>
					</th:block>

				</ul>
				<ul class="pub_pro">
					<li>
						<a href="javascript:void(0)">
							<img src="/qingzhu/images/img45.jpg" alt="">
						</a>
						<div class="mask">
						</div>
					</li>
					<th:block th:unless="${#lists.isEmpty(marketingGreat)}">
						<th:block th:each="mG : ${marketingGreat}">
							<li>
								<a th:href="@{'/goods/detail/'+${mG.goodsId}}">
									<img th:src="@{${mG.goodsCoverImg}}" th:alt="${mG.goodsName}">
									<div class="cont">
										<h3 th:text="${mG.goodsName}">替换的文字</h3>
										<span th:text="${mG.sellingPrice}">￥450</span>
									</div>
								</a>
								<div class="mask"></div>
							</li>
						</th:block>
					</th:block>
					<th:block th:if="${#lists.isEmpty(marketingNew)}">
						<li>
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img46.png" alt="">
								<div class="cont">
									<h3>简约时尚水泥花瓶</h3>
									<span>￥450</span>
								</div>
							</a>
							<div class="mask">
								<a href="javascript:void(0)" class="btn">
									查看详情
								</a>
							</div>
						</li>

						<li>
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img47.png" alt="">
								<div class="cont">
									<h3>简约时尚水泥花瓶</h3>
									<span>￥450</span>
								</div>
							</a>
							<div class="mask">
								<a href="javascript:void(0)" class="btn">
									查看详情
								</a>
							</div>
						</li>
						<li>
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img48.png" alt="">
								<div class="cont">
									<h3>简约时尚水泥花瓶</h3>
									<span>￥450</span>
								</div>
							</a>
							<div class="mask">
								<a href="javascript:void(0)" class="btn">
									查看详情
								</a>
							</div>
						</li>
						<li>
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img49.png" alt="">
								<div class="cont">
									<h3>简约时尚水泥花瓶</h3>
									<span>￥450</span>
								</div>
							</a>
							<div class="mask">
								<a href="javascript:void(0)" class="btn">
									查看详情
								</a>
							</div>
						</li>
					</th:block>

				</ul>
			</div>
		</div>
		<div class="pro4">
			<div class="title">
				<h2><a href="javascript:void(0)">全球大牌优选，买手用心挑选</a></h2>
				<p class="info">全球好货，原装正品</p>
			</div>
			<div class="por4_top">
				<div class="pic1 pic">
					<img src="/qingzhu/images/img51.jpg" alt="">
					<span></span>
				</div>
				<div class="pic2">
					<div class="top pic">
						<img src="/qingzhu/images/img52.jpg" alt="">
						<span></span>
					</div>
					<div class="bottom pic">
						<img src="/qingzhu/images/img53.jpg" alt="">
						<span></span>
					</div>
				</div>
				<div class="pic3 pic">
					<img src="/qingzhu/images/img54.jpg" alt="">
					<span></span>
				</div>
			</div>
			<div class="pro4_bottom">
				<ul class="pro4_c">
					<li>
						<div class="pic">
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img55.png" alt="">
							</a>
						</div>
						<p class="cont">
							<a href="javascript:void(0)">
								自然生活，精选用料
							</a>
						</p>
					</li>
					<li>
						<div class="pic">
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img56.png" alt="">
							</a>
						</div>
						<p class="cont">
							<a href="javascript:void(0)">
								自然生活，精选用料
							</a>
						</p>
					</li>
					<li>
						<div class="pic">
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img57.png" alt="">
							</a>
						</div>
						<p class="cont">
							<a href="javascript:void(0)">
								自然生活，精选用料
							</a>
						</p>
					</li>
					<li>
						<div class="pic">
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img58.png" alt="">
							</a>
						</div>
						<p class="cont">
							<a href="javascript:void(0)">
								自然生活，精选用料
							</a>
						</p>
					</li>
					<li>
						<div class="pic">
							<a href="javascript:void(0)">
								<img src="/qingzhu/images/img59.png" alt="">
							</a>
						</div>
						<p class="cont">
							<a href="javascript:void(0)">
								自然生活，精选用料
							</a>
						</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- qingzhu_content部分结束 -->
<!-- liangpin部分开始 -->
<div class="liangpin">
	<div class="liangpin_c inner_c">
		<div class="title">
			<h2><a href="javascript:void(0)">良品体验</a></h2>
			<p class="info">用户反馈，是我们改进的目标</p>
		</div>
		<div class="lp_pro">
			<ul>
				<li>
					<a href="javascript:void(0)" title="">
						<img src="/qingzhu/images/img61.png" alt="">
					</a>
					<div class="cont">
						<div class="tit">
							<h4>天草陶石咖啡杯套装</h4>
							<span>￥299</span>
						</div>
						<p class="info">
							使用了粉碎高品质的天草陶石后提炼而成的土，制作了泛着淡青色的白瓷。用餐时可以记住食品名称、体会新鲜口味···可对颜色和口味、气味、口感逐个品味，从中感受用餐的乐趣，同时还可自然而然地了解日本饮食文化
						</p>
						<p class="time">
							<span>alice</span>
							<span>2016-12-16</span>
							<span>09:59</span>
						</p>
					</div>
				</li>
				<li>
					<a href="javascript:void(0)" title="">
						<img src="/qingzhu/images/img62.png" alt="">
					</a>
					<div class="cont">
						<div class="tit">
							<h4>天草陶石咖啡杯套装</h4>
							<span>￥299</span>
						</div>
						<p class="info">
							使用了粉碎高品质的天草陶石后提炼而成的土，制作了泛着淡青色的白瓷。用餐时可以记住食品名称、体会新鲜口味···可对颜色和口味、气味、口感逐个品味，从中感受用餐的乐趣，同时还可自然而然地了解日本饮食文化
						</p>
						<p class="time">
							<span>alice</span>
							<span>2016-12-16</span>
							<span>09:59</span>
						</p>
					</div>
				</li>
				<li>
					<a href="javascript:void(0)" title="">
						<img src="/qingzhu/images/img63.png" alt="">
					</a>
					<div class="cont">
						<div class="tit">
							<h4>天草陶石咖啡杯套装</h4>
							<span>￥299</span>
						</div>
						<p class="info">
							使用了粉碎高品质的天草陶石后提炼而成的土，制作了泛着淡青色的白瓷。用餐时可以记住食品名称、体会新鲜口味···可对颜色和口味、气味、口感逐个品味，从中感受用餐的乐趣，同时还可自然而然地了解日本饮食文化
						</p>
						<p class="time">
							<span>alice</span>
							<span>2016-12-16</span>
							<span>09:59</span>
						</p>
					</div>
				</li>
				<li>
					<a href="javascript:void(0)" title="">
						<img src="/qingzhu/images/img64.png" alt="">
					</a>
					<div class="cont">
						<div class="tit">
							<h4>天草陶石咖啡杯套装</h4>
							<span>￥299</span>
						</div>
						<p class="info">
							使用了粉碎高品质的天草陶石后提炼而成的土，制作了泛着淡青色的白瓷。用餐时可以记住食品名称、体会新鲜口味···可对颜色和口味、气味、口感逐个品味，从中感受用餐的乐趣，同时还可自然而然地了解日本饮食文化
						</p>
						<p class="time">
							<span>alice</span>
							<span>2016-12-16</span>
							<span>09:59</span>
						</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<!-- liangpin部分结束 -->
<!-- footer部分开始 -->
<div th:replace="/qingzhu/front/head_and_footer::footer"></div>

<!-- 返回顶部 -->
<div th:replace="/qingzhu/front/head_and_footer::back_to_top"></div>
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/mall/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/mall/js/index.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script src="/qingzhu/js/jquery-3.3.1.min.js"></script>
<script src="/qingzhu/js/index.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("#show-all-type").hover(function () {
			$("#all-type").show()
		}, function () {
			$("#all-type").hide()
		});
		$("#all-type").hover(function () {
			$("#all-type").show()
		}, function () {
			$("#all-type").hide()
		})
	})
</script>
</body>
</html>
